<template>
<div>
    <h2 style="text-align: center;">理财列表</h2>
    理财名称: <input type="text" placeholder="请输入理财名称" v-model="WhereInfo.Fname">
    利息:
    <select v-model="WhereInfo.FIid">
        <option value="0">--请选择--</option>
        <option v-for="item in selinfo" :key="item.FI_Id" :value="item.FI_Id">{{ item.FI_Interest }}%</option>
    </select>
    <input type="button" value="查询" @click="LoadData">
    <table border="1">
        <thead>
            <tr>
                <td>理财编号</td>
                <td>理财名称</td>
                <td>年收益</td>
                <td>利息</td>
                <td>理财最低金额</td>
                <td>理财人次</td>
                <td>风险等级</td>
            </tr>
        </thead>

        <tbody>
            <tr v-for="item in info" :key="item.B_Id">
                <td>{{ item.F_Id }}</td>
                <td>{{ item.F_Name }}</td>
                <td>{{ item.F_APY }}</td>
                <td>{{ item.FI_Interest }}%</td>
                <td>{{ item.F_MinMoney }}</td>
                <td>{{ item.F_Number }}</td>
                <td>{{ (item.F_Level==0?"低风险":item.F_Level==1?"中风险":"高风险") }}</td>
            </tr>
        </tbody>
    </table>
    
    <span>
        总共{{ PageInfo.totalCount }}条数据,每页显示{{ PageInfo.PageSize }}条,当前第{{ PageInfo.PageIndex }}/{{ PageInfo.PageCount }}页&nbsp;

        <a href="#" @click="PageSet('F')">首页</a>&nbsp;
        <a href="#" @click="PageSet('U')">上一页</a>&nbsp;
        <a href="#" @click="PageSet('N')">下一页</a>&nbsp;
        <a href="#" @click="PageSet('E')">尾页</a>&nbsp;

        <input type="text" style="width: 30px;" v-model="SizeTiao">
        <input type="button" value="GO" @click="TiaoSize">
    </span>
</div>
</template>
    
<script setup lang="ts">
import {ref,onMounted} from'vue';
import axios from 'axios';
    
//创建响应式数据
const info=ref([{
    F_Id:0,
    F_Name:"",
    F_APY:0,
    F_MinMoney:0,
    F_Number:0,
    F_Level:0,
    FI_Interest:0
}])
    
//创建响应式数据用于绑定下拉
const selinfo=ref({
    FI_Id:0,
    FI_Interest:0
})

//创建响应式数据用于跳转页面
const SizeTiao=ref("")
    
//创建响应式数据 用于查询
const WhereInfo=ref({
    Fname:"",
    FIid:0
})
    
//创建响应式数据用于分页
const PageInfo=ref({
    PageIndex:1,//当前页
    PageSize:2,//每页显示
    totalCount:0,//总条数
    PageCount:0//总页数
})
    
//创建生命周期函数钩
onMounted(()=>{
    GetSelect()
    LoadData()
})
    
//完成下拉框数据加载
const GetSelect=()=>{
    axios.get("https://localhost:44309/api/Finans/ShowFinanInterest")
    .then(res=>{
        selinfo.value=res.data
    })
    .catch(error=>{
        console.log(error);
    })
}
    
//完成数据加载
const LoadData=()=>{
    axios.get("https://localhost:44309/api/Finans/ShowFinancingInfo",
        {
            params:{
                Fname:WhereInfo.value.Fname,
                FIid:WhereInfo.value.FIid,
                PageIndex:PageInfo.value.PageIndex,
                PageSize:PageInfo.value.PageSize
            }
        }
    )
    .then(res=>{
        info.value=res.data.list

        //总条数
        PageInfo.value.totalCount=res.data.totalCount;
        //总页数
        PageInfo.value.PageCount=res.data.PageCount;
    })
    .catch(error=>{
        console.log(error);
    })
}
    
//完成分页
const PageSet=(val:string)=>{
    switch(val)
    {
        case 'F':
            //首页 当前页=1
            PageInfo.value.PageIndex=1;
        break;
    
        case 'U':
            //上一页 当前页-1
            if(PageInfo.value.PageIndex>1)
            {
                PageInfo.value.PageIndex--;
            }
            else
            {
                alert('当前已经是首页');
                return;
            }
                
        break;
    
        case 'N':
            ///下一页 当前页+1
            if(PageInfo.value.PageIndex<PageInfo.value.PageCount)
            {
                PageInfo.value.PageIndex++;
            }
            else
            {
                alert('当前已经是尾页');
                return;
            }
        break;

        case 'E':
            //尾页 当前页=最大页数
            PageInfo.value.PageIndex=PageInfo.value.PageCount;
        break;
    }
    LoadData();
}

//完成指定页面跳转
const TiaoSize=()=>{
    var NewSize=SizeTiao.value;

    //跳转页码值不能为空
    if(NewSize=="")
    {
        alert('跳转页码值不能为空');
        return;
    }

    //跳转页码必须为数字
    if(isNaN(Number(SizeTiao.value)))
    {
        alert('跳转页码必须为数字');
        return;
    }

    //跳转页码不能小于1或大于最大页码
    if(Number(SizeTiao.value)<1||Number(SizeTiao.value)>PageInfo.value.PageCount)
    {
        alert('跳转页码不能小于1或大于最大页码');
        return;
    }
    PageInfo.value.PageIndex=Number(SizeTiao.value)
    LoadData();
}
</script>
    